<template>
  <div class="table-test">
    <!-- 页面标题 -->
    <PageHeader 
      title="表格组件测试" 
      description="测试系统中的表格组件功能"
      icon="Grid"
    />
    
    <!-- 基础表格测试 -->
    <el-card class="test-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>基础表格</span>
        </div>
      </template>
      
      <EnhancedTable
        :data="tableData"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        @page-change="handlePageChange"
      >
        <template #toolbar>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button type="danger" @click="handleBatchDelete" :disabled="selectedRows.length === 0">批量删除</el-button>
        </template>
        
        <template #actions="{ row }">
          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
        </template>
      </EnhancedTable>
    </el-card>
    
    <!-- 高级表格测试 -->
    <el-card class="test-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>高级表格</span>
        </div>
      </template>
      
      <AdvancedTable
        :data="advancedTableData"
        :columns="advancedColumns"
        :loading="loading"
        :pagination="advancedPagination"
        :expandable="true"
        @sort-change="handleAdvancedSortChange"
        @selection-change="handleAdvancedSelectionChange"
        @page-change="handleAdvancedPageChange"
      >
        <template #toolbar>
          <el-button type="primary" @click="handleAdvancedAdd">新增</el-button>
          <el-button type="success" @click="handleExport">导出</el-button>
        </template>
        
        <template #expand="{ row }">
          <div class="expand-content">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="详细描述">{{ row.description }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ row.createdAt }}</el-descriptions-item>
              <el-descriptions-item label="更新时间">{{ row.updatedAt }}</el-descriptions-item>
              <el-descriptions-item label="备注">{{ row.remark }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </template>
        
        <template #status="{ row }">
          <el-tag :type="getStatusTagType(row.status)">{{ getStatusText(row.status) }}</el-tag>
        </template>
        
        <template #actions="{ row }">
          <el-button type="primary" link @click="handleAdvancedEdit(row)">编辑</el-button>
          <el-button type="success" link @click="handleView(row)">查看</el-button>
          <el-button type="danger" link @click="handleAdvancedDelete(row)">删除</el-button>
        </template>
      </AdvancedTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import PageHeader from '@/components/layout/PageHeader.vue'
import EnhancedTable from '@/components/BaseTable.vue'
import AdvancedTable from '@/components/AdvancedTable.vue'

// 基础表格数据
const tableData = ref([])
const loading = ref(false)
const selectedRows = ref([])
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 高级表格数据
const advancedTableData = ref([])
const advancedPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 基础表格列配置
const columns = [
  { type: 'selection', width: 50 },
  { prop: 'id', label: 'ID', width: 80, sortable: true },
  { prop: 'name', label: '姓名', minWidth: 120 },
  { prop: 'email', label: '邮箱', minWidth: 150 },
  { prop: 'phone', label: '电话', width: 120 },
  { prop: 'department', label: '部门', width: 120 },
  { prop: 'position', label: '职位', width: 120 },
  { prop: 'createdAt', label: '创建时间', width: 160 },
  { prop: 'actions', label: '操作', width: 150, fixed: 'right' }
]

// 高级表格列配置
const advancedColumns = [
  { type: 'selection', width: 50 },
  { type: 'expand', width: 50 },
  { prop: 'id', label: 'ID', width: 80, sortable: true },
  { prop: 'name', label: '商品名称', minWidth: 150 },
  { prop: 'category', label: '分类', width: 100 },
  { prop: 'price', label: '价格', width: 100, sortable: true },
  { prop: 'stock', label: '库存', width: 100, sortable: true },
  { prop: 'status', label: '状态', width: 100 },
  { prop: 'supplier', label: '供应商', minWidth: 150 },
  { prop: 'actions', label: '操作', width: 200, fixed: 'right' }
]

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case 'active': return 'success'
    case 'inactive': return 'info'
    case 'pending': return 'warning'
    case 'suspended': return 'danger'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'active': return '启用'
    case 'inactive': return '停用'
    case 'pending': return '待审核'
    case 'suspended': return '暂停'
    default: return '未知'
  }
}

// 加载基础表格数据
const loadTableData = () => {
  loading.value = true
  // 模拟数据
  setTimeout(() => {
    tableData.value = [
      {
        id: 1,
        name: '张三',
        email: 'zhangsan@example.com',
        phone: '13800138001',
        department: '技术部',
        position: '前端工程师',
        createdAt: '2025-11-15 09:30:00'
      },
      {
        id: 2,
        name: '李四',
        email: 'lisi@example.com',
        phone: '13800138002',
        department: '产品部',
        position: '产品经理',
        createdAt: '2025-11-15 10:15:30'
      }
    ]
    pagination.total = 50
    loading.value = false
  }, 500)
}

// 加载高级表格数据
const loadAdvancedTableData = () => {
  loading.value = true
  // 模拟数据
  setTimeout(() => {
    advancedTableData.value = [
      {
        id: 1,
        name: 'iPhone 15 Pro',
        category: '电子产品',
        price: 8999,
        stock: 50,
        status: 'active',
        supplier: '苹果公司',
        description: '最新款iPhone手机，配备A17 Pro芯片',
        createdAt: '2025-11-15 09:30:00',
        updatedAt: '2025-11-15 09:30:00',
        remark: '热销商品'
      },
      {
        id: 2,
        name: 'MacBook Pro 14"',
        category: '电子产品',
        price: 15999,
        stock: 20,
        status: 'active',
        supplier: '苹果公司',
        description: 'M3 Pro芯片，性能强劲',
        createdAt: '2025-11-15 10:15:30',
        updatedAt: '2025-11-15 10:15:30',
        remark: '高端商品'
      }
    ]
    advancedPagination.total = 30
    loading.value = false
  }, 500)
}

// 基础表格事件处理
const handleSortChange = (sortInfo: any) => {
  console.log('基础表格排序:', sortInfo)
}

const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows
}

const handlePageChange = (pageInfo: any) => {
  pagination.currentPage = pageInfo.currentPage
  pagination.pageSize = pageInfo.pageSize
  loadTableData()
}

const handleAdd = () => {
  console.log('新增基础表格数据')
}

const handleBatchDelete = () => {
  console.log('批量删除基础表格数据:', selectedRows.value)
}

const handleEdit = (row: any) => {
  console.log('编辑基础表格数据:', row)
}

const handleDelete = (row: any) => {
  console.log('删除基础表格数据:', row)
}

// 高级表格事件处理
const handleAdvancedSortChange = (sortInfo: any) => {
  console.log('高级表格排序:', sortInfo)
}

const handleAdvancedSelectionChange = (rows: any[]) => {
  console.log('高级表格选择变化:', rows)
}

const handleAdvancedPageChange = (pageInfo: any) => {
  advancedPagination.currentPage = pageInfo.currentPage
  advancedPagination.pageSize = pageInfo.pageSize
  loadAdvancedTableData()
}

const handleAdvancedAdd = () => {
  console.log('新增高级表格数据')
}

const handleExport = () => {
  console.log('导出高级表格数据')
}

const handleView = (row: any) => {
  console.log('查看高级表格数据:', row)
}

const handleAdvancedEdit = (row: any) => {
  console.log('编辑高级表格数据:', row)
}

const handleAdvancedDelete = (row: any) => {
  console.log('删除高级表格数据:', row)
}

// 生命周期
onMounted(() => {
  loadTableData()
  loadAdvancedTableData()
})
</script>

<style scoped>
.table-test {
  padding: 20px;
}

.test-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.expand-content {
  padding: 20px;
}
</style>